/* 基础设置 */
/* 在 :root 伪类中定义变量 */
:root {
    --main-bg-color: #337ab7; /* 定义背景颜色变量 */
    --hover-bg-color: #286090; /* hover时深蓝色背景 */
    --active-bg-color: #204d74; /* active时深蓝色背景 */
    --main-font-color: #fff; /* 主要字体白色 */
    --sub-bg-color: #fff; /* 子级背景白色 */
    --sub-font-color: #333; /* 子级字体颜色为灰色 */
}


nav a {
    cursor: pointer;
    font-size: 20px;
}

.menu-container {
    background-color: var(--main-bg-color);
}

.menu-container nav {
    width: 1400px;
    margin: 0 auto;
}

/* --------------------- bootstrap 菜单效果 ------------------- */
/* 设置基础颜色稍微浅一点的蓝色 */
.navbar-default {
    background-color: var(--main-bg-color); /* 浅蓝色背景 */
    border-color: var(--main-bg-color); /* 浅蓝色边框 */
}

/* 设置一级菜单样式 */
.navbar-default .navbar-nav > li {
    width: 150px;
    text-align: center;
}

/* 鼠标悬停在上级菜单时的样式，包括有dropdown和没有dropdown的菜单 */
.navbar-default .navbar-nav > li:hover > a,
.navbar-default .navbar-nav > .open > a {
    background-color: var(--hover-bg-color); /* hover时的背景颜色稍微深一点 */
    color: var(--main-font-color); /* 文字颜色为白色 */
}

/* active状态的菜单项颜色 */
.navbar-default .navbar-nav > .active > a {
    background-color: var(--active-bg-color); /* active状态的背景颜色 */
    color: var(--main-font-color); /* active状态的文字颜色 */
}

/* active状态的菜单项hover效果，与其他hover保持一致 */
.navbar-default .navbar-nav > .active > a:hover {
    background-color: var(--hover-bg-color); /* active状态hover的背景颜色 */
    color: var(--main-font-color); /* active状态hover的文字颜色 */
}

/* 一级菜单间的竖线分隔 */
.navbar-nav > li:not(:last-child) {
    position: relative;
    padding-right: 1px; /* 调整菜单项与分割线之间的宽度 */
}

.navbar-nav > li:not(:last-child)::before,
.navbar-nav > li:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 10px; /* 分割线距右侧菜单的距离 */
    width: 1px;
    height: 50%; /* 分割线的高度 */
    transform: translateY(-50%);
}

.navbar-nav > li:not(:last-child)::before {
    background: #11567d; /* before伪类的颜色较深 */
    right: 0; /* 分割线距右侧菜单的距离 */
}

.navbar-nav > li:not(:last-child)::after {
    background: #2888bd;; /* after伪类的颜色较浅 */
    right: 1px; /* 分割线距右侧菜单的距离 */
}

/* 下级菜单的样式 */
.navbar-default .navbar-nav .dropdown-menu {
    background-color: var(--sub-bg-color); /* 设置下级菜单的背景颜色为白色 */
    border: none; /* 移除边框 */
    padding: 0;
    border-radius: 4px;
}

.navbar-default .navbar-nav .dropdown-menu > li > a {
    color: var(--sub-font-color); /* 设置下级菜单的字体颜色为深灰色 */
    height: 50px; /* 设置子菜单的高度 */
    line-height: 50px; /* 设置文字垂直居中 */
    padding: 0 15px; /* 设置内边距 */
}

.navbar-default .navbar-nav .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav .dropdown-menu > li > a:focus {
    background-color: var(--hover-bg-color); /* 设置下级菜单链接hover的背景颜色 */
    color: var(--main-font-color); /* 设置下级菜单链接hover的文字颜色为白色 */
}

/* 子菜单中第一个和最后一个菜单的圆角效果 */
.navbar-default .navbar-nav .dropdown-menu > li:first-child > a:hover,
.navbar-default .navbar-nav .dropdown-menu > li:first-child > a:focus,
.navbar-default .navbar-nav .dropdown-menu > li:first-child {
    border-radius: 4px 4px 0 0; /* 第一个菜单的顶部圆角 */
}

.navbar-default .navbar-nav .dropdown-menu > li:last-child > a:hover,
.navbar-default .navbar-nav .dropdown-menu > li:last-child > a:focus,
.navbar-default .navbar-nav .dropdown-menu > li:last-child {
    border-radius: 0 0 4px 4px; /* 最后一个菜单的底部圆角 */
}

/* 重置一级菜单的默认颜色 */
.navbar-default .navbar-nav > li > a {
    color: var(--main-font-color); /* 设置一级菜单的文字颜色为白色 */
}

/* 移入上级菜单下级菜单显示，移出时隐藏 */
/* 添加过渡效果，使下级菜单动画平滑显示 */
.navbar-default .navbar-nav .dropdown-menu {
    display: block;
    opacity: 0;
    transform: scaleY(0); /* 初始时缩放为0，不显示菜单 */
    transform-origin: top; /* 动画从顶部开始，不影响主菜单 */
    visibility: hidden;
    transition: opacity 0.5s, transform 0.5s; /* 添加过渡效果 */
}

/* 鼠标悬停在上级菜单时显示下级菜单 */
.navbar-default .navbar-nav > .dropdown:hover .dropdown-menu {
    opacity: 1;
    transform: scaleY(1); /* 结束时缩放为1，完全展开 */
    visibility: visible;
}

/* 调整caret的样式，使其在hover时旋转 */
.navbar-default .navbar-nav > .dropdown:hover > a .caret {
    transform: rotate(180deg);
    transition: transform 0.25s ease;
}